<template>
  <div>
    <m-table
      :data="proOrderList"
      :selection="true"
      ref="proList"
    >
      <template v-slot:header="{ row }">
        <div style="width:100%;display:flex;align-items: center;justify-content:space-between">
          <div>
            <span style="margin-right:50px">订单号：{{ row.prizeOrderId }}</span>
            <span style="margin-right:50px">创建时间{{ row.createTime }}</span>
          </div>
          <span
            style="float:right;margin-right:10px;cursor: pointer;"
          >
            <el-popover
              placement="bottom-start"
              width="200"
              trigger="hover"
              :disabled="!row.note"
            >
              <div>备注：{{row.note}}</div>
              <i
                slot="reference"
                class="iconfont iconPC-beizhu"
                :style="{ color: row.backRemark ? 'red' : '' }"
                style="font-size:24px"
                @click="remarkOrders(row)"
              ></i>
            </el-popover>
          </span>
        </div>
      </template>
      <m-table-column
        label="商品"
        v-slot="{ row }"
        width="240"
        height="80"
      >
        <div class="product">
          <img
            :src="row.integralGoodsPic"
            alt=""
          />
          <span class="product__name">{{ row.integralGoodName }}</span>
        </div>
      </m-table-column>
      <m-table-column
        prop="changeCode"
        label="积分"
        width="100"
        v-slot="{ row }"
      >
        <div class="table__type">
          <span>{{ row.price }}</span>
        </div>
      </m-table-column>
      <m-table-column
        prop="address"
        label="地址"
        width="200"
        v-slot="{ row }"
      >
        <div class="table__type">
          <span>{{ row.address }}</span>
        </div>
      </m-table-column>
      <m-table-column
        prop="wxuserName"
        label="买家"
        width="120"
        v-slot="{ row }"
      >
        <div class="table__type">
          <span>{{ row.wxuserName }}</span>
        </div>
      </m-table-column>
      <m-table-column
        label="订单状态"
        v-slot="{ row }"
      >
        <div class="table__type">
          <DeliveryCom :detail="row"></DeliveryCom>
        </div>
      </m-table-column>
      <m-table-column
        label="实付积分"
        v-slot="{ row }"
      >
        <span class="tableCenter">
          <div class="tableCenter__price">
            {{ row.shoppingInfVos[0].integralPrice }}
          </div>
          <div class="tableCenter__price">
            (含快递：￥{{ row.shippingFee }})
          </div>
        </span>
      </m-table-column>
      <m-table-column
        label="操作"
        v-slot="{ row }"
      >
        <div class="table__type">
          <el-button
            type="text"
            @click="show(row)"
          >查看详情</el-button>
          <div
            class="table__type--sureBtn"
            @click="clickSure(row)"
            v-if="row.prizeOrderStatus === 1"
          >
            确认收货
          </div>
        </div>
      </m-table-column>
    </m-table>
    <el-dialog
      :visible.sync="remarkVisible"
      width="30%"
      :before-close="closeHandle"
    >
      <div
        slot="title"
        style="font-weight:bold"
      >备注</div>
      <!-- <Remark :detail="remarkContent" @remarkSure="remarkSure"></Remark> -->
      <div>
        <div class="">您已选择1笔订单</div>
        <el-input
          style="margin-top:20px"
          type="textarea"
          :autosize="{ minRows: 4, maxRows: 4 }"
          placeholder="请输入备注"
          v-model="remarkContent.backRemark"
        ></el-input>
        <div
          class="digBottom"
          style=""
        >
          <el-button
            size="small"
            @click="closeHandle"
          >取 消</el-button>
          <el-button
            size="small"
            type="primary"
            @click="dialogSure"
          >确 定</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="detailVisible"
      width="750px"
      :before-close="beforeCloseHandle"
    >
      <ProductDetail
        :detail="detailContent"
        :visible="detailVisible"
      ></ProductDetail>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
import DeliveryCom from "./DeliveryCom.vue";
import ProductDetail from "./ProductDetail.vue";
// import Remark from "./dialog/Remark.vue";
import {
  integralRemarkOrder,
  integralOrderSure,
} from "@/api/integral/integral";

@Component({
  components: {
    DeliveryCom,
    ProductDetail,
    // Remark,
  },
})
export default class ProductTable extends Vue {
  get proList() {
    return this.$parent.proList;
  }

  @Watch("proList")
  getProOrderList() {
    this.proOrderList = this.proList;
  }

  /** 商品订单列表 */
  proOrderList: any = [];

  /** 查看详情 */
  detailVisible = false;

  /** 备注详情 */
  remarkContent = {
    backRemark: "",
  };

  /** 点击的详情信息 */
  detailContent = {} as any;

  /** 弹窗状态 */
  remarkVisible = false;

  /**
   * 单个订单信息设置备注
   */
  remarkOrders(row) {
    this.remarkVisible = true;
    this.remarkContent = row;
  }

  show(row) {
    this.detailContent = row;
    this.detailVisible = true;
  }

  /**
   * 确认收货
   */
  clickSure(row) {
    const orderIds = [];
    orderIds.push(row.prizeOrderId);
    integralOrderSure(orderIds)
      .then(() => {
        this.$message.success("收货成功");
        this.$parent.getProOrder();
      })
      .catch((err) => {
        this.$message.error(err || "网络错误");
      });
  }

  /**
   * 获取更新后数据
   */
  beforeCloseHandle() {
    this.detailVisible = false;
    if (this.detailContent.prizeOrderStatus === 0) {
      this.$parent.getProOrder();
    }
  }

  /**
   * 关闭弹窗
   */
  closeHandle() {
    this.$confirm("确定退出备注窗口？退出后，备注信息不会保留？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        this.remarkVisible = false;
      })
      .catch((err) => {
        console.log(err, "err");
      });
  }

  /**
   * 弹框确认
   */
  dialogSure() {
    const integralOrders = [];
    const remarkContent = this.remarkContent as any;
    integralOrders.push(remarkContent.prizeOrderId);
    integralRemarkOrder({
      backRemark: remarkContent.backRemark,
      isCoverage: true,
      integralOrders,
    }).then((res) => {
      if (res.code === 200) {
        this.$message.success("备注成功");
        this.remarkVisible = false;
        this.$parent.getProOrder();
      }
    });
  }
}
</script>

<style lang="scss" scoped>
@include b(product) {
  display: flex;
  img {
    width: 60px;
    height: 60px;
  }
  @include e(name) {
    margin-left: 20px;
    width: 140px;
  }
}

.table__type {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  &--sureBtn {
    font-size: 10px;
    color: #f35353;
    cursor: pointer;
  }
}

.digBottom {
  margin-top: 40px;
  display: flex;
  align-content: center;
  justify-content: center;
}

.tableCenter {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

  &__price {
    width: 100px;
    display: flex;
    justify-content: center;
  }
}
</style>
